<template>
	<view class="privateMessage">
		<view class="fixedTop">
			<!-- #ifdef MP-WEIXIN -->
			<u-status-bar></u-status-bar>
			<!-- #endif -->
			<view class="searchBar">
				<!-- #ifndef MP-TOUTIAO -->
				<image class="back" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/Left.png"
					mode="scaleToFill" @click="back()">
				</image>
				<!-- #endif -->
				<view class="userTop">
					<image :src="userData.avatar" mode="scaleToFill">
					</image>
					<text>{{userData.nickname}}</text>
				</view>
			</view>
		</view>
		<view class="chat-container">
			<!-- 消息列表 -->
			<scroll-view class="message-list" scroll-y :scroll-into-view="lastMsgId" :style="heiV" @scroll="scrolltoupper">
				<view v-for="(msg, index) in msgInfoList" :key="index" :id="'msg' + index"
					:class="['message-item', msg.is_send == 1 ? 'my-message' : 'other-message']">
					<view class="time">{{msg.created_at}}</view>
					<view v-if="msg.is_send == 1" class="message-content">
						<text>{{ msg.content }}</text>
						<image :src="msg.user.avatar" mode="scaleToFill"></image>
					</view>
					<view v-else class="message-content">
						<image :src="msg.user.avatar" mode="scaleToFill"></image>
						<text>{{ msg.content }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 输入区域 -->
		<view class="input-area">
			<input class="inp" v-model="inputText" placeholder="输入消息..." @confirm="sendMessage" confirm-type="发送" />
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				heiV: "height: calc(100vh - 184rpx)",
				// #endif
				// #ifndef MP-WEIXIN
				heiV: "height: calc(100vh - 88rpx)",
				// #endif
				userData: {},
				inputText: "",
				uid: "",
				isLoading: false,
				debounceTimer: null, // 防抖计时器
			}
		},
		computed: {
			...mapState(["msgInfoList", "lastMsgId", "total"]),
		},
		onLoad(options) {
			// console.log(options);
			this.getAuthorInfo(options.uid)
			this.uid = options.uid
			this.$store.dispatch("messageInfo")
		},
		methods: {
			scrolltoupper(event) {
				const {
					scrollTop
				} = event.detail;
				if (scrollTop <= 10 && !this.isLoading) {
					if (this.debounceTimer) clearTimeout(this.debounceTimer);
					this.debounceTimer = setTimeout(() => {
						console.log(scrollTop);
						this.loadMore();
					}, 800);
				}

			},
			async loadMore() {
				this.isLoading = true;
				try {
					if (this.msgInfoList.length >= this.total) return
					this.$store.state.page += 1
					await this.$store.dispatch("messageInfo")
				} catch (error) {
					console.error('加载失败', error);
				} finally {
					this.isLoading = false;
				}
			},
			// 发消息
			async sendMessage() {
				if (!this.inputText.trim()) return;
				let type = await this.$store.dispatch("sendMessage", {
					another_id: this.uid,
					content: this.inputText,
				})
				// console.log(8969,this.$store.state.msgInfoList);
				if (type) {
					this.inputText = ""
				}
			},
			back() {
				this.navigateBack()
				this.$store.state.page = 1
				this.$store.state.msgInfoList = []
			},
			//查看他人信息
			async getAuthorInfo(user_id) {
				let res = await this.$http("api/work/getAuthorInfo", {
					user_id
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.userData = res.result;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.privateMessage {
		// #ifdef MP-WEIXIN
		padding-top: 184rpx;
		// #endif
		// #ifndef MP-WEIXIN
		padding-top: 88rpx;

		// #endif
		max-height: 100vh;
		box-sizing: border-box;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			background-color: #fff;

			.searchBar {
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;

				.back {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}

				.userTop {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					text {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						padding: 0 8rpx;
					}
				}
			}
		}

		.chat-container {

			// display: flex;
			// flex-direction: column;
			.message-list {
				flex: 1;
				// padding: 20rpx;
				box-sizing: border-box;
				padding-bottom: 168rpx;

				.message-item {
					margin: 20rpx 0;
					padding: 15rpx 32rpx;
					// border-radius: 10rpx;
					// max-width: 70%;

					.time {
						font-weight: 500;
						font-size: 28rpx;
						color: #8D8F90;
						text-align: center;
						padding-bottom: 32rpx;
					}
				}

				.my-message {
					margin-left: auto;

					.message-content {
						display: flex;
						align-items: flex-end;
						justify-content: flex-end;

						image {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
							margin-left: 16rpx;
						}

						text {
							// flex: 1;
							padding: 24rpx;
							background-color: #D1FF23;
							// margin-left: auto;
							border-radius: 42rpx 42rpx 0rpx 42rpx;
							max-width: 396rpx;
						}
					}

				}

				.other-message {
					margin-right: auto;

					.message-content {
						display: flex;
						align-items: flex-end;

						image {
							width: 76rpx;
							height: 76rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}

						text {
							// flex: 1;
							padding: 24rpx;
							background-color: #F4F4F4;
							// margin-right: auto;
							border-radius: 42rpx 42rpx 42rpx 0rpx;
							max-width: 396rpx;
						}
					}

				}
			}
		}

		.input-area {
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 84rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 686rpx;
			height: 84rpx;
			background: #F4F4F4;
			border-radius: 51rpx 51rpx 51rpx 51rpx;
			box-sizing: border-box;
			padding: 0 16rpx;

			.inp {
				flex: 1;
				font-weight: bold;
				font-size: 28rpx;

				.input-placeholder {
					font-weight: bold;
					font-size: 28rpx;
					color: #797979;
				}
			}
		}
	}
</style>